<template>
  <div class="newposBottom">
    <el-table
      :data="tableData"
      style="width: 100%"
      class="table">
      <!-- 交易时间 -->
      <el-table-column :label="$t('order.time')" width="200px">
        <template slot-scope="props">
          {{props.row.createTs | dateFormatBIHM}}
        </template>
      </el-table-column>
      <!-- 账户名 -->
      <el-table-column :label="$t('newpos.accountName')">
        <template slot-scope="props">
          {{props.row.account}}
        </template>
      </el-table-column>
      <!-- 类型 -->
      <el-table-column :label="$t('newpos.type')">
        <template slot-scope="props">
          <span class="color-green" v-if="props.row.type === 1">
            {{ $t('newpos.increaseMined') }}
          </span>
          <span class="color-red" v-if="props.row.type === 2">
            {{ $t('newpos.reduceMined') }}
          </span>
        </template>
      </el-table-column>
      <!-- 数量 -->
      <el-table-column :label="$t('jy.number')">
        <template slot-scope="props">
          {{toFixed(props.row.count, 4)}} EOS
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { toFixed } from '@/utils/validate';

export default {
  name: 'newposBottom', // 矿池底部-最新记录
  data() {
    return {
      tableData: []
    }
  },
  components: {},
  props: ['operationRecords'],
  watch: {
    operationRecords: function change(items) {
      this.tableData = items.filter((v, index) => index < 15);
    }
  },
  computed: {},
  created() {},
  mounted() {},
  beforeDestroy() {},
  methods: {
    // 数字截取 - 保留小数
    toFixed(num, p) {
      if (!num && num !== 0) {
        return toFixed(0, p);
      }
      return toFixed(num, p);
    },
  },
}
</script>
<style lang="scss" scoped>
@import '@/views/newpos/public.scss';
$color: rgba(255, 255, 255, 0.8);
.newposBottom{
  padding: 10px 30px;
  border-radius: 8px;

  /deep/ .table {
    border: none;
    &::before {
      display: none;
    }
    td, tbody, th {
      border: none;
    }

    th {
      padding: 4px 0;
    }

    th > .cell {
      color: #999;
      text-align: center;
      padding: 6px 0;
    }

    td {
      color: #333;
      text-align: center;
      padding: 8px 0;
    }

    /deep/ .el-table__body tbody tr td:nth-child(4) .cell {
      text-align: right;
      padding-right: 130px;
    }
  }
}

.theme-1B1D27 {
  .newposBottom {
    background: #2c3859;

    /deep/ .el-table {
      background-color: #2c3859 !important;
      color: $color !important;

      .el-table__header tr th, .el-table__body tr td {
        background-color: #2c3859 !important;
        color: #fff !important;
      }

      .el-table__header tr th .cell {
        color: #9AB2ED !important;
      }
    }
  }
}
</style>
